<script setup>
import {ref, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const stockDialogVisible=ref(false)
const props = defineProps({
  stockVisible:{
    type:Boolean,
    default:false,
    required:false
  },
  currentStock:{
    type:Number,
    required:false
  },
  id:{
    type:Number,
    required:false
  }
})
const newStock = ref()
const emits=defineEmits("")
watch(()=>props.stockVisible,(newVal)=>{
  stockDialogVisible.value=newVal;
})
watch(()=>props.currentStock,(newVal)=>{
  newStock.value=newVal;
})
const handleClose =()=>{
  stockDialogVisible.value=false
  emits("stockDialogVisible",stockDialogVisible.value)
}
const confirmStock = ()=>{
  axios.post(`/carcenter-service-order/products/modify/${props.id}/${newStock.value}`).then(resp=>{
    ElMessage.success(resp.data)
    stockDialogVisible.value=false
    emits("update-stock",{id:props.id,newStock:newStock.value})
  })
}
</script>

<template>
  <el-dialog v-model="stockDialogVisible" title="修改库存" width="30%" :before-close="handleClose">
    <div class="dialog-content">
      <p>当前库存数量：{{ props.currentStock }}</p>
      <el-input-number v-model="newStock" :min="0" :max="1000" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmStock">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>